
import React,{Component,Fragment} from 'react';
import "../../../node_modules/video-react/dist/video-react.css"; // 引入视频css
import videoPath from '../../assets/video/1-1.mp4';
import { DocList } from '../../config/srtDoc';
import { connect } from 'react-redux';
import { getVideoMarkline } from '../../redux/actions';
import { reqVideoUrlSrtById } from '../../api';
import {
  Player,
  ControlBar,
  PlayToggle, // PlayToggle 播放/暂停按钮 若需禁止加 disabled   
  ReplayControl, // 后退按钮
  ForwardControl,  // 前进按钮
  CurrentTimeDisplay,
  TimeDivider,
  PlaybackRateMenuButton,  // 倍速播放选项
  VolumeMenuButton,   // 音量菜单按钮
} from 'video-react';
import { message } from 'antd';

class VideoPlayer extends Component{

  constructor(props){
    super(props);
    this.state = {
      videoUrl: '',   //,  //videoPath,  // 视频url ''
      srtText: [],   // 字幕文件 DocList []
      itemText: '',  // 当前显示的字幕
      pattern: true,  // 当前视频同步方式，默认正向同步
    }

    this.changeCurrentTime = this.changeCurrentTime.bind(this);
  }

  // getVideoUrlAndSrt = async(videoAdress) => {   // 获取 视频url 
  //   const result = await reqVideoUrlSrtById(videoAdress);
  //   console.log('视频',result,videoAdress);
  //   // this.state({
  //   //   videoUrl: result
  //   // })
  //   // if(result.code === 200){
  //   //   // this.setState({
  //   //   //   videoUrl = result.data
  //   //   // })
  //   // }else{
  //   //   message.error(result.data);
  //   // }
  // }


//将srt中的字符串时间转化为所需要的格式，这里转化成了秒数
  getSeconds = (val) => {
    //let arr = val.split(/\,|\./)
    let sec = 0
    let a = val.split(':');   //arr[0].split(':');
    sec = Number(a[0])*60*60+Number(a[1])*60+Number(a[2])+a[3]/1000;     //arr[1]/1000;
    return sec
  };

  showSrtText = (currentTime) => {  // 显示当前时间的对应字幕 
    // console.log("当前时间",currentTime);
    this.state.srtText.map((item,index) => {
      let timeSplit = item.time.split('-->');
      let startTime = this.getSeconds(timeSplit[0]);  // 每一条 的 起始时间
      let endTime = this.getSeconds(timeSplit[1]);   // 每一条 的 终止时间
      
      if(currentTime >= startTime && currentTime <= endTime){   // 当前时间在 某个字幕显示时间段 内
        //console.log("当前字幕",item.text);
        let itemText = item.text;
        this.setState({
          itemText
        });
        let currentDepth = itemText.split("]")[3].split("[")[1];  //itemText.split(";")[0].split(":")[1].split("米")[0];   // 视频播放的 当前深度，以字幕显示 深度 为准
        // const startDepth = this.props.depthDataa[0];
        // const endDepth = this.props.depthDataa[this.props.depthDataa.length - 1];
        //console.log("获取深度",currentDepth,startDepth,endDepth);
        this.props.getVideoMarkline(currentDepth);  // 保存当前深度，确定 标记线位置

        // if(this.state.pattern){   // 正向同步：控制滚动条！！！！！
        //   if(currentDepth >= startDepth){  // 现深 大于起深   (且 小于终深：&& currentDepth <= endDepth, 没必要，且会出现一些小问题)
        //     const count = Math.ceil( (currentDepth - startDepth) / 5 );   // 计算 滚动条 滚动距离
        //     this.props.handleRemoveAuto(count);  // 自动 调整滚动条，在data-process.js中定义的
        //     //console.log("计算n",startDepth,currentDepth,count); 
        //   }else if(currentDepth <= startDepth){   // 现深 小于 起深
        //     this.props.handleRemoveAuto(0);
        //     //console.log("现深 小于 起深");
        //   }
        // }
      }
    })
  }

  //根据深度来定位时间
  // getTimeFromDepth = ( depth ) =>{
  //   let currentDepth; 
  //   this.state.srtText.map(item=>{
  //     currentDepth = item.text.split("]")[3].split("[")[1];
  //     if(currentDepth==depth){
  //       let timeSplit = item.time.split('-->');
  //       let startTime = this.getSeconds(timeSplit[0]);  // 每一条 的 起始时间
  //       let endTime = this.getSeconds(timeSplit[1]);   // 每一条 的 终止时间
  //       console.log(startTime,endTime)
  //     }
  //   })
  // }

  handleStateChange = (state, prevState) => {  // 监听中 修改为当前状态值
      this.setState({
        player: state,
        currentTime: state.currentTime
      },() =>{
        this.showSrtText(this.state.currentTime);  // 查找当前时间的对应字幕，并显示
      });
  };


  // 逆向同步（获取深度 同步视频进度条）-------------------------------------------------------------------------------------------------
  changeCurrentTime(jumpTime) {   // 3 根据 时间 修改 视频进度条
    console.log("跳转视频")
    this.player.seek(jumpTime);
  }

  handleDepthSeekTime = (newDepthYdata) => {   //2  根据 深度 查询 对应时间
    this.state.srtText.map((item) => {
      const srtTextDepth = Number(item.text.split("]")[3].split("[")[1]);   // 视频播放的 当前深度，以字幕显示 深度 为准 
      if(srtTextDepth == newDepthYdata){   // 整数部分相同即可
        // 获取 该条字幕的起始时间,并转换时间格式
        let timeSplit = item.time.split(' --> ')
        let jumpTime = this.getSeconds(timeSplit[0]);  // 每一条 的 起始时间
        //console.log("深度匹配成功",srtTextDepth,newDepthYdata,item.time,startTime);
        this.props.getVideoMarkline(newDepthYdata);  // 保存当前深度，确定 标记线位置
        console.log("执行跳转")
        this.changeCurrentTime(jumpTime);
      }  
    })
  }

  componentWillReceiveProps(nextProps){   // 获取 需要跳转的深度
    const newDepthYdata = nextProps.videoClickYdata;
    // console.log(nextProps,this.props)
    // if(!this.state.pattern){  // 反向同步 时 触发
      if(nextProps.videoClickYdata!=this.props.videoClickYdata){
        console.log("红线位置应该为：",nextProps.videoClickYdata)
         this.handleDepthSeekTime(newDepthYdata);  // 根据深度确定时间，在字幕文件中匹配深度 查询 对应时间
      }
     
    // }
  }
//----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  componentWillMount(){
    const docData = this.props.docData;
    console.log("视频路径",docData);
    if(docData.video){  // 获取视频；
      var videoAddress = docData.video.videoAddress;
      var lastUrl = videoAddress.substring(videoAddress.indexOf("data")).substring(4)
      console.log("视频路径",lastUrl);

      var videoUrl = 'http://47.104.167.113:8080/file' + lastUrl;
      this.setState({
        videoUrl
      })
    }else{
      message.info("没有视频文件！")
    }

    if(docData.subtitle){  // 获取字幕
      this.setState({
        srtText: docData.subtitle.subtitleData
      })
    }
    
    this.setState({
      pattern: this.props.videodirection   // 获取视频同步方式
    })
    
  };
  componentDidMount(){
    this.player.subscribeToStateChange(this.handleStateChange.bind(this));  // 监听视频播放
  };
  render(){
    return (
    <div className="video-player-wrapper">
      <Player
        height={300}
        width={500}
        id="video"
        fluid={false}
        ref={player => {this.player = player;}}
        //poster="https://video-react.js.org/assets/poster.png"   // 视频封面图片
      >
        <source
          src= {this.state.videoUrl}   // 视频路径
          type="video/mp4"  // 视频类型
        />
        <ControlBar autoHide={false} disableDefaultControls={false} className='user-controlBar'>
          <ReplayControl seconds={5} order={1.1} />
          <ForwardControl seconds={5} order={1.2} />
          <PlayToggle />    
          <CurrentTimeDisplay order={4.1} />
          <TimeDivider order={4.2} />
          <PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1} />
          <VolumeMenuButton vertical/>
        </ControlBar>
      </Player>
      <div className="video-srtText">{this.state.itemText}</div>
    </div>
    
    )
  }
}

export default connect(
  state => ({ docData: state.docData, depthDataa: state.depthDataa, videoClickYdata: state.videoClickYdata, videodirection: state.videodirection}),
  {getVideoMarkline}
)(VideoPlayer);